<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发布时间：{{ photoinfo.add_time | dateFormat}}</span>
            <span>点击次数：{{ photoinfo.click }}次</span>
        </p>
        <hr>

        <!-- 缩略图区域 -->
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>

        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 4.评论子组件 -->
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>

<script>
// 4.1.导入评论子组件
import comment from  '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id:this.$route.params.id,   // 从路由中获取的图片id  存放在此  方便后续调用
            photoinfo:{}, // 图片详情对象    同之前的新闻详情对象
            list: [],  // 图片缩略图数组
        };
    },
    created() {
        this.getPhotoInfo();
        this.getThumbs();
        this.handleClose();
    },
    methods:{
        getPhotoInfo(){
            this.$http.get('api/getimageInfo/' + this.id).then(result => {
                if(result.body.status === 0){
                    this.photoinfo = result.body.message[0];   // 因为传回的message为一个数组
                }
            })
        },
        getThumbs() {
            this.$http.get('api/getthumimages/' + this.id).then(result => {
                if(result.body.status === 0) {
                    // 循环每个图片的数据 补全宽和高
                    result.body.message.forEach(item => {
                        item.w = 600;
                        item.h = 400;
                    });
                    // 把完整的数据保存在list中
                    this.list = result.body.message;
                }
            })
        },
        handleClose () {
        console.log('close event')
        }
    },
    components:{
        // 4.2注册评论子组件
        'cmt-box':comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container {
    padding: 3px;
    h3 {
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content {
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs {
        margin: 10px;
        box-shadow: 0 0 8px #999;
    }
}
</style>
